<template>
  <view class="mainView">
    <text>柱状图</text>
    <eui-lime-chart :option="chartOption" :chartStyle="chartStyle"/>
    <text>折线图</text>
    <eui-lime-chart :option="chartOption1" :chartStyle="chartStyle2"/>
  </view>
</template>

<script>
export default {
  name: "lime-chart",
  data() {
    return {
      chartOption: {
        legend: {
          right: '5%',
          top: 'middle',
          align: 'auto',
          orient: 'vertical',
          itemGap: 20
        },
        series: [
          {
            right: '30%',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 25, name: '大卖场' },
              { value: 30, name: '购物中心' },
              { value: 30, name: '便利店' },
              { value: 10, name: '标超' },
              { value: 5, name: '加盟店' }
            ]
          }
        ]
      },
      chartOption1: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          data: ['金额'],
          bottom: 0,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        series: [
          {
            name: '金额',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      },
      chartStyle: 'width: 700rpx; height: 450rpx',
      chartStyle2: 'width: 700rpx; height: 450rpx',
    }
  }
}
</script>

<style scoped>
.mainView {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
}
</style>
